<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <canvas id='world'></canvas>
    <script> 
        window.log = console.log;
        // One of my first <canvas> experiments, woop! :D 
        var SCREEN_WIDTH = window.innerWidth;
        var SCREEN_HEIGHT = window.innerHeight;
        var RADIUS = 70;
        var RADIUS_SCALE = 1;
        var RADIUS_SCALE_MIN = 1;
        var RADIUS_SCALE_MAX = 1.5;
        var QUANTITY = 25;
        var canvas;
        var context;
        var particles;
        var mouseX = SCREEN_WIDTH * 0.5;
        var mouseY = SCREEN_HEIGHT * 0.5;
        var mouseIsDown = false;
        var context_add = null;
        var clearflag = false;
        function init() {
            canvas = document.getElementById('world');
            if (canvas && canvas.getContext) {
                context = canvas.getContext('2d');
                context_add = context;
                // Register event listeners 
                window.addEventListener('mousemove', move_loop, false);
                window.addEventListener('mousedown', move_loop, false);
                // window.addEventListener('mouseup', documentMouseUpHandler, false);
                document.addEventListener('touchstart', move_loop, false);
                // document.addEventListener('touchend', clera, false);
                document.addEventListener('touchmove', move_loop, false);

                window.addEventListener('resize', windowResizeHandler, false);

                createParticles();

                windowResizeHandler();
                // context.fillStyle = 'rgba(0,0,0,0.05)';
                // context.fillRect(0, 0, context.canvas.width, context.canvas.height);

                // setInterval(loop, 1000 / 60);
            }
        }
        function move_loop(event) {
            clearflag = false;
            check_point(event)
        }
        function clera() {
            clearflag = true;
            var loop_id = setInterval(loop, 1000 / 60);
            setTimeout(function () {
                clearInterval(loop_id)
            }, 1000)
        }
        function createParticles() {
            particles = [];

            for (var i = 0; i < QUANTITY; i++) {
                var particle = {
                    size: 20,
                    position: { x: mouseX, y: mouseY },
                    offset: { x: 0, y: 0 },
                    shift: { x: mouseX, y: mouseY },
                    speed: 0.1 + Math.random() * 0.04,
                    targetSize: 1,
                    fillColor: '#' + (Math.random() + 0xaaaaaa | 0).toString(16),
                    orbit: RADIUS * .5 + (RADIUS * .5 * Math.random())
                };

                particles.push(particle);
            }
        }
        function documentMouseMoveHandler(event) {
            mouseX = event.clientX - (window.innerWidth - SCREEN_WIDTH) * .5;
            mouseY = event.clientY - (window.innerHeight - SCREEN_HEIGHT) * .5;
        }
        function documentMouseDownHandler(event) {
            mouseIsDown = true;
        }
        function documentMouseUpHandler(event) {
            mouseIsDown = false;
        }
        function documentTouchStartHandler(event) {
            if (event.touches.length == 1) {
                event.preventDefault();
                mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * .5;;
                mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * .5;
            }
        }
        function documentTouchMoveHandler(event) {
            if (event.touches.length == 1) {
                event.preventDefault();
                mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * .5;;
                mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * .5;
            }
        }
        function windowResizeHandler() {
            SCREEN_WIDTH = window.innerWidth;
            SCREEN_HEIGHT = window.innerHeight;
            canvas.width = SCREEN_WIDTH;
            canvas.height = SCREEN_HEIGHT;
        }
        function loop(event,mouseX,mouseY) {
            var flag = true;
            // try {
            //     documentMouseMoveHandler(event);
            // } catch (e) {
            //     console.log(e)
            //     flag = true;
            // }


            log("inner loop and clearaflg ++++++++++++++++++++++++++++++++")
            log(clearflag)
            if (flag && !clearflag) {
                try {
                    documentTouchMoveHandler(event);
                }
                catch (e) {
                    console.log(e)
                }
            }
            if (mouseIsDown) {
                RADIUS_SCALE += (RADIUS_SCALE_MAX - RADIUS_SCALE) * (0.02);
            }
            else {
                RADIUS_SCALE -= (RADIUS_SCALE - RADIUS_SCALE_MIN) * (0.02);
            }

            RADIUS_SCALE = Math.min(RADIUS_SCALE, RADIUS_SCALE_MAX);

            context.fillStyle = 'rgba(0,0,0,0.05)';
            context.fillRect(0, 0, context.canvas.width, context.canvas.height);

            for (i = 0, len = particles.length; i < 1; i++) {
                var particle = particles[i];

                var lp = { x: particle.position.x, y: particle.position.y };

                // Rotation 
                particle.offset.x += particle.speed;
                particle.offset.y += particle.speed;

                // Follow mouse with some lag 
                particle.shift.x += (mouseX - particle.shift.x) * (particle.speed);
                particle.shift.y += (mouseY - particle.shift.y) * (particle.speed);

                // Apply position 
                particle.position.x = particle.shift.x;
                particle.position.y = particle.shift.y;

                // Limit to screen bounds 
                particle.position.x = Math.max(Math.min(particle.position.x, SCREEN_WIDTH), 0);
                particle.position.y = Math.max(Math.min(particle.position.y, SCREEN_HEIGHT), 0);


                if (Math.round(particle.size) == Math.round(particle.targetSize)) {
                    particle.targetSize = 1 + Math.random() * 2;
                }

                context.beginPath();
                if (clearflag) {
                    context.fillStyle = "#000000";
                    context.strokeStyle = "#000000";
                } else {
                    context.fillStyle = particle.fillColor;
                    context.strokeStyle = particle.fillColor;
                }

                context.lineWidth = particle.size;
                context.moveTo(lp.x, lp.y);
                context.lineTo(particle.position.x, particle.position.y);
                context.stroke();
                context.arc(particle.position.x, particle.position.y, particle.size / 2, 0, Math.PI * 2, true);
                context.fill();
            }
        }
        window.onload = init;




        //  check touch point
        function check_point(e) {

            [].forEach.call(e.targetTouches, function (touch) {
                mouseX = touch.pageX - (window.innerWidth - SCREEN_WIDTH) ;
                mouseY = touch.pageY - (window.innerHeight - SCREEN_HEIGHT) ;

                log("pagex",touch.pageX);
                log("pagey",touch.pageY);

                console.log(touch.identifier);
                // console.log("mouseX", mouseX);
                // console.log("mouseY", mouseY);
                //对每一根触摸在屏幕上的手指都生成一个元素，并且用touch.identifier作为该元素的唯一标识，触摸结束后清除引用的元素

                // console.log("spots[touch.identifier]")
                var div = document.createElement("div");
                div.innerText = JSON.stringify(e.targetTouches);
                console.log(e.targetTouches);
                loop(e,mouseX,mouseY);
                // document.body.appendChild(div);
            })

        }

    </script>

</body>

</html>